<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        需求:
        1.利用自定义指令 v-big 设置元素内部值放大的备注。
        1.利用自定义指令 v-bind 实现v-bind的 功能 并且输入框要获取焦点

        自定义指令总结:
        定义语法:
        (1).局部指令:
        new Vue({new Vue({directives:{指令名:配置对象}或directives{指令名:回调函数}
        (2).全局指令:Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)

        配置对象中常用的3个回调:
        (1).bind:指令与元素成功绑定时调用。
        (2).inserted:指令所在元素被插入页面时调用。
        (3).update:指令所在模板结构被重新解析时调用。
        备注:
        1.指令定义时不加v-，但使用时要加v-;
        2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelcase命名。
                                    user-name                   userName
    -->

    <div id="app">
        <h2 v-big="50">{{num}}</h2>

        <hr>

        <input type="text" v-fbind:value="88">
    </div>
</body>
<script>
    //全局自定义指令 类似过滤器
    // Vue.directive('fbind',{
    //     bind(ele,bing){
    //         ele.value = bing.value
    //     },
    //     inserted(ele,bing){
    //         ele.focus()
    //     },
    //     updat(ele,bing){
    //         ele.value = bing.value
    //     }
    // })


    var vm = new Vue({
        el: '#app',
        data:{
            num:1,
            name:"123"
        },
        directives:{
            //加载时间：1.第一次被挂载时 2.模板更新时会被调用
            big(ele,bing){
                ele.innerHTML = bing.value * ele.innerHTML
            },
            //自定义指令在执行时也是有执行步骤的  第一次绑定时、元素解析完插入后、模板更新时  3个时机，
            // 如果不配置这3个 方法聚焦功能无法实现，原因在于聚焦的方法在绑定时就执行了
            fbind:{
                //第一次绑定时
                bind(ele,bing){
                    ele.value = bing.value
                },
                //元素插入后
                inserted(ele,bing){
                    ele.focus()
                },
                //模板更新时
                updat(ele,bing){
                    ele.value = bing.value
                }
            },
            //不同命名规则的定义  举例说明 没有在容器中设置
            // 'bind-name':function(ele,bing){
            //     ele.innerHTML = bing.value * ele.innerHTML
            // }
        }
    })
</script>

</html>